<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 关于我们 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="员工风采" name="1"></el-tab-pane>
        <el-tab-pane label="内部风采" name="2"></el-tab-pane>
        <el-tab-pane label="公司管理" name="3"></el-tab-pane>
      </el-tabs>
      <!-- 员工风采 -->
      <div v-if="activeName == '1'">
        <el-row>
          <el-col :span="8" v-for="item in imgArr" :key="item.id">
            <el-image style="width: 375px; height: 200px" :src="item.pic" fit="fill" :preview-src-list="[item.pic]"></el-image>
            <div style="text-align: center;">
              <el-upload class="upload-demo" action="" :before-upload="(file)=>{editfeng(file,item.id)}" accept=".png,.jpg" :show-file-list="false">
                <el-button size="small" type="text" icon="el-icon-edit">重新上传</el-button>
              </el-upload>
              <el-button type="text" icon="el-icon-delete" @click="delfeng(item.id)">删除</el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <el-upload class="upload-demo" drag action="" :before-upload="addfeng" accept=".png,.jpg" :show-file-list="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-col>
        </el-row>
      </div>
      <!-- 内部风采 -->
      <div v-if="activeName == '2' || activeName == '3'">
        <div class="handle-box">
          <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
          <el-input placeholder="请输入内容查询" class="handle-input mr10" v-model="query.kw"></el-input>
          <el-button class="mr10" type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
        </div>
        <el-table :data="tableData" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="name" label="图片">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.pic" :preview-src-list="[scope.row.pic]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="editClick(scope.row)">编辑</el-button>
              <el-button type="text" icon="el-icon-setting" class="red" @click="delfeng(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                         :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="添加内容" :visible.sync="main.flg" width="35%">
      <el-form ref="form" :model="main.form" label-width="80px">
        <el-form-item label="上传图片">
          <el-image v-if="main.form.pic" style="width: 100px; height: 100px" :src="main.form.pic" :preview-src-list="[main.form.pic]">
          </el-image>
          <el-upload action="" :before-upload="addupimg" accept=".png,.jpg" :show-file-list="false">
            <el-button type="primary">{{main.form.pic ? '重新上传':'上传'}}</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" :rows="3" v-model="main.form.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="main.flg = false">取 消</el-button>
        <el-button type="primary" @click="formSub" :loading="main.form.load">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { webDaboutInit, webDaboutAdd, webDaboutEdit, webDaboutDel } from '../../../api/index';
import cosUpFile from '../../../utils/cos'
export default {
  data() {
    return {
      activeName: '1',
      query: {
        page: 1,
        limit: 10,
        kw: '',
        totalCount: 0
      },
      imgArr: [],
      tableData: [],
      main: {
        flg: false,
        load: false,
        editid: '',
        form: {}
      }
    }
  },
  created() {
    this.getInit();
  },
  methods: {
    //列表初始化
    getInit() {
      webDaboutInit({
        page: this.query.page,
        limit: this.activeName == '1' ? '10000000' : this.query.limit,
        kw: this.query.kw,
        type: this.activeName
      }).then(res => {
        if (res.code == 0) {
          if (this.activeName == '1') {
            this.imgArr = res.recordList;
          } else {
            this.tableData = res.recordList;
            this.query.totalCount = res.totalCount;
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //上传员工风采
    addfeng(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          webDaboutAdd({
            // pic: 'https://img2.baidu.com/it/u=63249423,2260265143&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1656090000&t=5abcf2180313eb8411a386a5524a5db0',
            pic: 'https://' + data.Location,
            content: '',
            type: this.activeName
          }).then(res => {
            if (res.code == 0) {
              this.$message.success("上传成功");
              this.getInit();
            } else {
              this.$message(res.msg);
            }
          })
        }
      })
      return false;
    },
    //编辑上传员工风采
    editfeng(file, id) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          webDaboutEdit({
            id: id,
            // pic: 'https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1656090000&t=f89d8f5f727ab003184943f006f82d0a',
            pic: 'https://' + data.Location,
            content: '',
            type: this.activeName
          }).then(res => {
            if (res.code == 0) {
              this.$message.success("编辑成功");
              this.getInit();
            } else {
              this.$message(res.msg);
            }
          })
        }
      })
      return false;
    },
    //删除
    delfeng(id) {
      webDaboutDel({
        id: id
      }).then(res => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //切换type
    handleClick() {
      this.query.page = 1;
      this.getInit();
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getInit();
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getInit();
    },
    //新增
    addClick() {
      this.main.flg = true;
      this.main.editid = '';
      this.main.form = {};
    },
    //编辑
    editClick(item) {
      this.main.flg = true;
      this.main.editid = item.id;
      this.main.form.pic = item.pic;
      this.main.form.content = item.content;
    },
    //上传图
    addupimg(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          // this.$set(this.main.form, 'pic', 'https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1656090000&t=f89d8f5f727ab003184943f006f82d0a');
          this.$set(this.main.form, 'pic', 'https://' + data.Location);
        }
      })
      return false;
    },
    //提交
    formSub() {
      this.main.form.load = true;
      if (this.main.editid) {
        webDaboutEdit({
          id: this.main.editid,
          pic: this.main.form.pic,
          content: this.main.form.content,
          type: this.activeName
        }).then(res => {
          this.main.form.load = false;
          if (res.code == 0) {
            this.$message.success("编辑成功");
            this.main.flg = false;
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        webDaboutAdd({
          pic: this.main.form.pic,
          content: this.main.form.content,
          type: this.activeName
        }).then(res => {
          this.main.form.load = false;
          if (res.code == 0) {
            this.$message.success("新增成功");
            this.main.flg = false;
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
</style>